<template>
	<view class="">
		<common-title :title="titleContent" @clickLeft="backToUpPage"></common-title>
		<view class="couple-set-uni-list">
			<uni-list>
				<!-- 组合名 -->
				<uni-list-item title="组合名" showArrow clickable :rightText="coupleInfo.couplesName" @click="changeCouplesName(coupleInfo.couplesName)"></uni-list-item>
				<!-- 背景板 -->
				<uni-list-item showArrow clickable @click="changeBackgroundPic">
					<template v-slot:header>
						<view style="display: flex;align-items: center;font-size: 18px;color:#3b4144;">背景板(app端调试不符合要求)</view>
					</template>
					<template v-slot:footer>
						<image class="slot-image" :src="coupleInfo.backgroundPic" mode="aspectFill"></image>
					</template>
				</uni-list-item>
				<!-- 第一次见面日 -->
				<uni-list-item title="第一次见面" showArrow clickable :rightText="coupleInfo.firstMeetDay" 
				@click="changeFirstMeetDay(coupleInfo.firstMeetDay)"></uni-list-item>
				<!-- 恋爱确认日 -->
				<uni-list-item title="恋爱确认日" showArrow clickable :rightText="coupleInfo.confirmLoveDay"
				@click="changeConfirmLoveDay(coupleInfo.confirmLoveDay)"></uni-list-item>
				<!-- 结婚日 -->
				<uni-list-item title="结婚日" showArrow clickable :rightText="coupleInfo.weddingDay"
				@click="changeWeddingDay(coupleInfo.weddingDay)"></uni-list-item>
				<!-- mine页展示 -->
				<uni-list-item title="展示" showArrow clickable 
				:rightText="showTimeType ? getShowName(showTimeType.type) : '未知名称'" 
				@click="changeShow(showTimeType.type)"></uni-list-item>
				
				
			</uni-list>
			
			<view style="height: 10px;"></view>
			<!-- 情侣解绑 -->
			<button @click="removeBond">
				<view>情侣解绑</view>
			</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad } from '@dcloudio/uni-app';
	import { getCoupleInfo } from "../../../utils/apiMine";
	import { getDataFromStorage } from "../../../utils/commonUtils";
	
	//===============================用户是否登录了=====================
	//================================common-title=========================================
	//标题内容
	const titleContent = ref({
		left:'',
		midst:'情侣信息'
	});
	
	//返回
	const backToUpPage = () => {
		uni.switchTab({
			url:'/pages/mine/mine'
		})
	};
	//-----------------获取情侣信息设置---------------------------------
	const showTimeType = ref(null);
	onLoad( async (options) => {
		await userCoupleInfo();
		
		await getDataFromStorage('showTimeType').then((res) => {
			// console.log(res);
			showTimeType.value = res;
		})
	});
	const coupleInfo = ref({
		backgroundPic:null,
		confirmLoveDay:null,
		couplesName:null,
		firstMeetDay:null,
		weddingDay:null
	});
	const userCoupleInfo = async () => {
		let res = await getCoupleInfo();
		// console.log(res);
		coupleInfo.value = res;
		if (res === null) {
			uni.showModal({
				content:'当前未绑定情侣，是否前往绑定？',
				success: function (res) {
						if (res.confirm) {
							uni.redirectTo({
								url:'/pages/mine/other_set/couple_set_item/couple-bind'
							})
						} else if (res.cancel) {
							uni.switchTab({
								url:'/pages/mine/mine'
							})
						}
					}
			});
			
		}
	};
	//-----------------------------------情侣解绑----------------------------------------
	const removeBond = () => {
		uni.showModal({
			title:'暂不支持解绑哦！',
			showCancel:false
		})
	};
	//-----------------------------------情侣信息更改----------------------------------------
	//修改组合名
	const changeCouplesName = (couplesName) => {
		// console.log(couplesName);
		uni.navigateTo({
			url: `/pages/mine/other_set/couple_set_item/couple-set-name?couplesName=${encodeURIComponent(couplesName)}`
		});
	}
	//修改背景板
	const changeBackgroundPic = () => {
		console.log(coupleInfo.value.avatar);
		uni.chooseImage({
			sourceType:'album',
			crop:{
				quality:100,
				width:100,
				height:100
			},
			success: function(res) {
				// 预览图片
				uni.previewImage({
					urls: res.tempFilePaths,
				});
			}
		})
	}
	
	//修改第一次见面的时间
	const changeFirstMeetDay = (firstMeetDay) => {
		// console.log(firstMeetDay)
		uni.navigateTo({
			url: `/pages/mine/other_set/couple_set_item/couple-set-firstMeetDay?firstMeetDay=${encodeURIComponent(firstMeetDay)}`
		});
	}
	
	//修改恋爱确认的时间
	const changeConfirmLoveDay = (confirmLoveDay) => {
		uni.navigateTo({
			url: `/pages/mine/other_set/couple_set_item/couple-set-confirmLoveDay?confirmLoveDay=${encodeURIComponent(confirmLoveDay)}`
		});
	}
	//修改结婚日的时间
	const changeWeddingDay = (weddingDay) =>{
		uni.navigateTo({
			url: `/pages/mine/other_set/couple_set_item/couple-set-weddingDay?weddingDay=${encodeURIComponent(weddingDay)}`
		});
	}
	//修改展示页面
	const showNameType = ref([
		{'type':'1','name':'第一次见面'},
		{'type':'2','name':'恋爱确认日'},
		{'type':'3','name':'结婚日'}
	]);
	// 根据 type 查找对应的 name
	const getShowName = (type) => {
		const matchedItem = showNameType.value.find(item => item.type === type);
		return matchedItem ? matchedItem.name : '未知名称'; // 如果没有找到，返回一个默认值
	};
	const changeShow = (type) => {
		uni.navigateTo({
			url: `/pages/mine/other_set/couple_set_item/couple-set-showDay?selectType=${encodeURIComponent(type)}`
		});
	}
	
</script>

<style lang="scss" scoped>
	.couple-set-uni-list{
		uni-list-item{
			font-size: 36px;
		}
	}
	.slot-image {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			margin-right: 10px;
			width: 100px;
			height: 50px;
			border-radius: 10rpx;
	}
</style>